<script lang="ts" setup>
const { index, title, expandInit } = defineProps<{
  index: number
  title: string
  expandInit?: boolean
  notAllowOperation?: boolean
}>()

// 修改父组件数据
const emit = defineEmits<{
  (e: 'add-episode', value: number): void
  (e: 'del-chapter', value: number): void
  (e: 'edit-chapter', index: number, value: string): void
}>()

// 向上向下图标控制变量
const isExpand = ref(expandInit ?? false)

// 是否编辑控制变量
let isEditState = ref(false)
// 章标题
let titleContent = ref(title)

// 章标题编辑或保存
function handleEditOrSave() {
  if (isEditState.value) {
    emit('edit-chapter', index, titleContent.value)
  }
  isEditState.value = !isEditState.value
}
</script>

<template>
  <div text-gray-7>
    <div border="~" p="x-4 y-2" flex items-center justify-between text-xl>
      <div flex="~ v-center" gap-4>
        <div cursor-pointer flex="~ v-center" @click="isExpand = !isExpand">
          <up-outlined v-show="!isExpand" />
          <down-outlined v-show="isExpand" />
        </div>
        <div flex="~ v-center" gap="0.8">
          <span flex-shrink-0>第{{ index + 1 }}章</span>
          <span v-show="!isEditState">{{ titleContent }}</span>
          <a-input text="lg!" v-model:value="titleContent" v-show="isEditState" />
        </div>
      </div>
      <div flex="~ v-center" gap-4 v-if="!notAllowOperation">
        <a-button :type="!isEditState ? 'dashed' : 'primary'" @click="handleEditOrSave" style="background-color:#1677ff">{{ isEditState ? '保存' : '编辑'
        }}</a-button>
        <a-button v-show="!isEditState" type="primary" danger @click="$emit('del-chapter', index)">删除</a-button>
        <a-button v-show="!isEditState" type="primary"
          @click="(isExpand = true) && $emit('add-episode', index)" style="background-color:#1677ff">新增集</a-button>
      </div>
    </div>

    <div w="95%" flex="~ col v-center" gap-2 ml-auto justify-end v-show="isExpand">
      <slot />
    </div>

  </div>
</template>